<template>
    <div>
        <nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4">
            <a href="#" class="navbar-brand">者也专栏</a>
            <ul v-if="!user.isLogin" class="list-inline mb-0">
                <li class="list-inline-item">
                    <a href="#" class="btn btn-outline-light my-2">登录</a>
                </li>
                <li class="list-inline-item">
                    <a href="#" class="btn btn-outline-light my-2">注册</a>
                </li>
            </ul>
            <ul v-else class="list-inline mb-0">
                <li class="list-inline-item">
                    <!-- <a href="#" class="btn btn-outline-light my-2">你好{{user.name}}</a> -->
                    <Dropdown :title="`你好,${user.name}`">
                        <DropdownItem>
                            <!-- <a href="#" >新建文章</a> -->
                            <router-link class="dropdown-item" to="/newwenzhan">新建文章</router-link>
                        </DropdownItem>
                        <DropdownItem disabled>
                            <a href="#" to="" class="dropdown-item">编辑资料</a>
                        </DropdownItem>
                        <DropdownItem><a href="#" class="dropdown-item">退出登录</a></DropdownItem>
                    </Dropdown>
                </li>
            </ul>
        </nav>
        
    </div>
</template>

<script lang="ts">
import { defineComponent,PropType } from 'vue'
// 
import Dropdown from './Dropdown.vue'
// 
import DropdownItem from './DropdownItem.vue'
export interface UserProps{
    isLogin: boolean;
    name?: string,
    id?: string
}
export default defineComponent({
    components:{
        Dropdown,DropdownItem
    },
    props:{
        user:{
            type: Object as PropType<UserProps>,
            required:true
        }
    },
    setup () {

        return {
            
        }
    }
})
</script>

<style scoped>

</style>
